<template>
  <div class="food-list">
    <el-empty v-if="foodStore.recipeList.length === 0" description="暂无记录"/>

    <div v-else class="list">
      <food-card v-for="(item, index) in foodStore.recipeList"
                 :key="index" :item="item"/>
    </div>
  </div>
</template>

<script setup lang="ts">
import FoodCard from '@/components/Food/FoodCard.vue'
import { useFoodStore } from '@/store/food'

const foodStore = useFoodStore()
</script>


<style lang="scss">
.food-list {
  .list {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
}
</style>
